<template>
  <div class="zixunlist">
    <div class="banner">
      <van-swipe
        class="my-swipe"
        :autoplay="3000"
        indicator-color="white"
        v-for="(item) in bannerdata"
        :key="item.id"
      >
        <van-swipe-item>
          <img
            :src="item.imageInput"
            alt=""
          >
        </van-swipe-item>

      </van-swipe>
    </div>

    <div class="bqlist">
      <van-tabs
        v-model="active"
        
      >
        <van-tab v-for="item in zixunbqlist"
        :key="item.id" :title="item.name">
          <zx :id="item"></zx>
        
        </van-tab>
        
      </van-tabs>
    </div>
    <div>
      
    </div>
  </div>
</template>
<script>
import zx from '../../../components/zixun/zixun.vue'
export default {
  data() {
    return {
      // 轮播图
      bannerdata: [],
      // 中间选择标签
      zixunbqlist: [],
      active: 0,
    };
  },
  methods: {
    async bannerlist() {
      const res = await this.$http.zixunlbt();
      // console.log(res.data.data.list);
      this.bannerdata = res.data.data.list;
      
    },
    async bqlist() {
      let zero={
        name:'全部'
      }
      const res = await this.$http.zixunbq();
      // console.log(res.data.data.list);
      this.zixunbqlist = res.data.data.list;
      this.zixunbqlist.unshift(zero)
      console.log(this.zixunbqlist);
    },
  },
  created() {
    // console.log(this.bannerlist());
    this.bannerlist();
    this.bqlist();
  },
  components: {
    zx,
  },
};
</script>
<style lang="scss" scoped>
.zixunlist {
  .my-swipe .van-swipe-item {
    height: 175px;
    // height: 100%;
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    // background-color: #39a9ed;
    img {
      width: 100%;
      height: 167px;
    }
  }
}
</style>